.uicon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size:90%;
    background-position: center;
}

.uicon-close {
    width:28px;
    height:28px;
    background-image:url(../assets/icon-wrong.png);
}

.uicon-close-dark {
    width:30px;
    height:30px;
    background-image:url(../assets/icon-close-dark.png);
}

.uicon-gps {
    width:28px;
    height:30px;
    background-image:url(../assets/icon-gps.png);
}

.uicon-search {
    width:28px;
    height:28px;
    background-image:url(../assets/icon-search.png);
}
.uicon-search-dark {
    width:29px;
    height:28px;
    background-image:url(../assets/icon-search-dark.png);
}

.uicon-add {
    width:28px;
    height:28px;
    background-image:url(../assets/icon-add.png);
}

.uicon-more {
    width:26px;
    height:26px;
    background-image:url(../assets/icon-more.png);
}

.uicon-hot {
    width:25px;
    height: 32px;
    background-image:url(../assets/icon-hot.png)
}


.uicon-play {
    width:70px;
    height:70px;
    background-image:url(../assets/icon-play.png)
}

.uicon-del {
    width:32px;
    height:32px;
    background-image:url(../assets/icon-del.gif);
}

.uicon-tabbar {
    width:36px;
    height:36px;
}

.uicon-news {
    background-image:url(../assets/icon-news.png)
}
.uicon-video {
    background-image:url(../assets/icon-video.png)
}
.uicon-rec {
    background-image:url(../assets/icon-rec.png)
}
.uicon-me {
    background-image:url(../assets/icon-me.png)
}
.uicon-square {
    width:32px;
    height:36px;
    background-image: url(../assets/icon-square.png)
}

.active {
    .uicon-news {
        background-image:url(../assets/icon-news-o.png)
    }
    .uicon-video {
        background-image:url(../assets/icon-video-o.png)
    }
    
    
    .uicon-rec {
        background-image:url(../assets/icon-rec-o.png)
    }
    
    
    .uicon-me {
        background-image:url(../assets/icon-me-o.png)
    }

    .uicon-square {
        background-image: url(../assets/icon-square-on.png)
    }
    
}

.uicon-back {
    width:16px;
    height:27px;
    background-image:url('../assets/icon-back.png');
}

.uicon-back-w {
    width:16px;
    height:27px;
    background-image:url('../assets/icon-back-w.png');
}

.uicon-bar-more {
    width:36px;
    height:8px;
    background-image:url('../assets/icon-bar-more.png')
}

.uicon-bar-more-w {
    width:36px;
    height:8px;
    background-image:url('../assets/icon-bar-more-w.png')
}

.uicon-unlike {
    width:80px;
    height: 80px;
    background-image:url('../assets/icon-unlike.png');
}

.uicon-fav {
    width:80px;
    height:80px;
    background-image:url('../assets/icon-fav.png')
}

.uicon-fav-o {
    width:80px;
    height:80px;
    background-image:url('../assets/icon-fav-o.png')
}

.uicon-night {
    width:80px;
    height:80px;
    background-image:url('../assets/icon-night.png')
}

.uicon-night-o {
    width:80px;
    height:80px;
    background-image:url('../assets/icon-night-o.png')
}

.uicon-report {
    width:80px;
    height:80px;
    background-image:url('../assets/icon-report.png')
}
.uicon-wx-share{
     width:80px;
    height:80px;
    background-image:url('../assets/wx-icon.png')
}
.uicon-qq-share{
    width:80px;
    height:80px;
    background-image:url('../assets/qq-icon.png')
}
.uicon-link-share{
     width:80px;
    height:80px;
    background-image:url('../assets/link-icon.png')
}
.uicon-email-share{
     width:80px;
    height:80px;
    background-image:url('../assets/email-icon.png')
}
.uicon-voice {
    width:29px;
    height:29px;
    background-image:url('../assets/icon-voice.png')
}
.uicon-voice-off {
    width:35px;
    height:35px;
    background-image: url('../assets/icon-voice-off.png')
}

.uicon-history {
    width:30px;
    height:30px;
    background-image: url(../assets/icon-history.png);
}

.uicon-hot-list {
    width:30px;
    height:30px;
    background-image:url(../assets/icon-hot-list.png)
}

.uicon-link {
    width:9px;
    height:15px;
    background-image:url(../assets/icon-link.png)
}

.uicon-view {
    top:-2px;
    width:28px;
    height:18px;
    background-image:url(../assets/icon-view.png)
}

.uicon-choose {
    width:27px;
    height:21px;
    background-image:url(../assets/icon-choose.png)
}

.uicon-report-done {
    width:144px;
    height:128px;
    background-image:url(../assets/icon-report-done.gif);
}

.uicon-loading {
    width:66px;
    height:66px;
    background-image: url(../assets/icon-loading.gif);
}

.uicon-loading.run {
    animation:loading 1s infinite;
}

.uicon-photo {
    width:40px;
    height:40px;
    background-image: url(../assets/icon-photo.png);
}

.uicon-filter {
    width: 32px;
    height: 32px;
    background-image: url(../assets/xinwenguolv.png);
}

.uicon-message {
    width: 32px;
    height: 32px;
    background-image: url(../assets/xiaoxi.png);
}

.uicon-history {
    width: 32px;
    height: 32px;
    background-image: url(../assets/history.png);
}

.uicon-feedback {
    width: 32px;
    height: 32px;
    background-image: url(../assets/fankui.png);
}

.uicon-set {
    width: 32px;
    height: 32px;
    background-image: url(../assets/set.png);
}

.uicon-uc-more {
    width:9px;
    height:15px;
    background-image:url(../assets/icon-item-link.png);
}
.uicon-pull {
    width: 60px;
    height:60px;
    background-image:url(../assets/icon-pull.png);
}

.uicon-pull.run {
    animation:loading 1s infinite linear;
}

.uicon-refresh {
    width:74px;
    height:63px;
    background-image: url(../assets/icon-refresh.png)
}

.uicon-gotop {
    width:42px;
    height:63px;
    background-image: url(../assets/icon-gotop.png)
}

.uicon-comment {
    width:71px;
    height:62px;
    background-image: url(../assets/icon-comment.png)
}

.uicon-com-edit {
    width:34px;
    height:32px;
    background-image: url(../assets/icon-com-edit.gif)
}
.uicon-com-text {
    width:34px;
    height:36px;
    background-image: url(../assets/icon-com-text.png)
}
.uicon-com-hot-1 {
    width:34px;
    height:36px;
    background-image: url(../assets/icon-com-hot-1.gif)
}

.uicon-com-hot-2 {
    width:34px;
    height:36px;
    background-image: url(../assets/icon-com-hot-2.gif)
}
.uicon-com-hot {
    width:34px;
    height:36px;
    background-image: url(../assets/icon-com-hot.gif)
}
.uicon-com-share {
    width:32px;
    height:36px;
    background-image: url(../assets/icon-com-share.gif)
}

.uicon-vip {
    width:24px;
    height:22px;
    background-image: url(../assets/comment-vip.png)
}

.uicon-vip-w {
    width:22px;
    height:20px;
    background-image: url(../assets/icon-vip-w.png)
}

.uicon-edit {
    width:30px;
    height:30px;
    background-image: url(../assets/icon-edit.png)
}

.uicon-info {
    width:40px;
    height:40px;
    background-image: url(../assets/icon-info.gif)
}

.uicon-camera {
    width:40px;
    height: 34px;
    background-image: url(../assets/icon-cam.png)
}
.uicon-img {
    width:40px;
    height: 34px;
    background-image: url(../assets/icon-img.png)
}

.uicon-admire,
.uicon-admire-on {
    width:33px;
    height: 30px;
}
.uicon-admire {
    background-image: url(../assets/good-click.png)
}
.uicon-admire-on {
    background-image: url(../assets/gooded.png)
}

.uicon-s-admire {
    width:30px;
    height:28px;
    background-image: url(../assets/icon-s-admire.jpg)
}

.uicon-s-comment {
    width:30px;
    height:30px;
    background-image: url(../assets/icon-s-com.jpg)
}

.uicon-s-share {
    width:28px;
    height: 28px;
    background-image: url(../assets/icon-s-share.jpg) 
}

.uicon-publish {
    width:32px;
    height:28px;
    background-image: url(../assets/icon-publish.png)
}

@keyframes loading {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}